<template>
  <div class="table-egress">
    <vab-query-form>
      <vab-query-form-left-panel>
        <el-button icon="el-icon-bicycle" type="primary" @click="handleAdd(0,'')" >
          外出登记
        </el-button>
        <el-button type="warning" @click="stamp(0)" >
          打印
        </el-button>


      </vab-query-form-left-panel>
      <vab-query-form-right-panel>

        <el-form ref="queryForm" :model="queryForm"  label-width="80px" >
          <el-form-item  prop="outingTimeStart" style="float: left">
<!--            <el-date-picker-->
<!--              size="mini"-->
<!--              v-model="queryForm.outingTimeStart"-->
<!--              type="datetime"-->
<!--              placeholder="外出时间">-->
<!--            </el-date-picker>-->


<!--          </el-form-item>-->

<!--          <el-form-item label="返回时间" prop="outingTimeEnd" style="float: left">-->
<!--            <el-date-picker-->
<!--              size="mini"-->
<!--              v-model="queryForm.outingTimeEnd"-->
<!--              type="datetime"-->
<!--              placeholder="返回时间">-->
<!--            </el-date-picker>-->

            <el-date-picker
              style="width: 250px"
              size="mini"
              align="right"

              @change="changetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              v-model="value1"
              type="datetimerange"
              :unlink-panels="true"
              range-separator="至"
              start-placeholder="外出时间"
              end-placeholder="返回时间">
            </el-date-picker>
          </el-form-item>
            <el-form-item label="姓名" prop="elderlyCondition" style="float: left;"  label-width="46px"       size="mini">
              <el-input v-model="queryForm.elderlyCondition" placeholder="老人姓名/助记码/证件号"></el-input>

          </el-form-item>



        </el-form>
         <el-button size="mini" type="primary" style="float: left" @click="search(1,'')">条件查询</el-button>



      </vab-query-form-right-panel>
    </vab-query-form>
    <el-dialog
      :title="title"
      :visible.sync="dialogFormVisible"
       width="600px"
      @close="close"
      destroy-on-close
    >
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <el-form-item label="老人姓名" prop="checkInMark" key="1" >
          <el-select
            v-if="!isshow"
            style="width: 100%"
            v-model="form.checkInMark"
            filterable
            remote
            clearable
            reserve-keyword
            placeholder="请输入入住人姓名/证件号/助记码"
            :remote-method="remoteMethod"
            @change="change"
            :loading="listLoading">
            <el-option

              v-for="item in options"
              :key="item.checkInMark"
              :label="item.elderlyName"
              :value="item.checkInMark">

              <span style="float: left;width: 24%">姓名：{{ item.elderlyName }}</span>
              <span style="width: 33%;color: #8492a6;font-size: 13px" >房间：{{ item.checkInBed}}</span>
              <span style="width: 45%;float: right; color: #8492a6; font-size: 13px">证件号：{{ item.cardNo }}</span>
            </el-option>
          </el-select>
          <span v-if="isshow">{{form.elderlyName}}</span>
        </el-form-item>
        <el-form-item label="家属姓名" prop="familyMemberName" >
          <el-input v-model.trim="form.familyMemberName" autocomplete="off"></el-input>


        </el-form-item>
        <el-form-item label="联系方式" prop="familyMemberPhone" >
          <el-input v-model.trim="form.familyMemberPhone" autocomplete="off"></el-input>


        </el-form-item>
        <el-form-item label="外出去向" prop="destination" >
          <el-input v-model.trim="form.destination" autocomplete="off"></el-input>


        </el-form-item>
          <el-form-item label="外出时间" prop="outingTime" key="2">

              <el-date-picker
                style="width: 100%"
                v-model="form.outingTime"
                type="datetime"
                :picker-options="pickerOptionsStart"
                placeholder="外出时间">
              </el-date-picker>

          </el-form-item>
        <el-form-item label="返回时间" prop="scComeBackTime">

            <el-date-picker
              style="width: 100%"
              :picker-options="pickerOptionsEnd"
              v-model="form.scComeBackTime"
              type="datetime"
              placeholder="返回时间">
            </el-date-picker>
        </el-form-item>
          <el-form-item label="外出原因" prop="outReason" v-if="!isshow">
            <el-input type="textarea" v-model="form.outReason"></el-input>
          </el-form-item>
  </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible=false" >取 消</el-button>
        <el-button type="primary" @click="saveegress">确 定</el-button>

      </div>
    </el-dialog>

    <el-table
      v-loading="listLoading"

      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      style="width: 100%"
      >
      <el-table-column type="expand">
        <template slot-scope="props">
        <el-form label-position="left"  class="demo-table-expand">
          <el-form-item label="确认人">
            <span>{{ props.row.confirmorName }}</span>
          </el-form-item>
          <el-form-item label="确认时间">
            <span  v-if="props.row.confirmTime">{{ props.row.confirmTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</span>
          </el-form-item>
          <el-form-item label="确认结果">
            <span>{{ props.row.confirmResName }}</span>
          </el-form-item>
          <el-form-item label="备注">
            <span>{{ props.row.remark }}</span>
          </el-form-item>
        </el-form>
        </template>




      </el-table-column>
      <el-table-column
        label="姓名"
        width="120">
        <template slot-scope="scope">{{ scope.row.elderlyName }}</template>
      </el-table-column>
      <el-table-column
        label="家属姓名"
        width="120"
        prop="familyMemberName"
      >

      </el-table-column>
      <el-table-column
        label="联系电话"
        width="120"
        prop="familyMemberPhone"
      >

      </el-table-column>
      <el-table-column
        label="外出地点"
        width="120"
        prop="destination"
      >

      </el-table-column>
      <el-table-column
        label="外出时间"
        width="220">
        <template slot-scope="scope" v-if="scope.row.outingTime">{{ scope.row.outingTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</template>
      </el-table-column>
      <el-table-column
        label="外出原因"
        width="180">
        <template slot-scope="scope">{{ scope.row.outReason }}</template>
      </el-table-column>
      <el-table-column
        label="预计返回时间"
        width="220">
        <template slot-scope="scope" v-if="scope.row.scComeBackTime">{{ scope.row.scComeBackTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</template>
      </el-table-column>
      <el-table-column
        label="返回时间"
        width="220">
        <template slot-scope="scope" v-if="scope.row.comeBackTime">{{ scope.row.comeBackTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}') }}</template>
      </el-table-column>

      <el-table-column
        label="预定外出小时数"
        width="220">
        <template slot-scope="scope">{{ scope.row.outTimeCount }}</template>
      </el-table-column>

      <el-table-column
        show-overflow-tooltip
        label="操作"
        width="300"
        fixed="right"
      >
        <template slot-scope="scope" >
          <el-button type="text"  @click="handleAdd(scope.row.id,scope.row)">修改<i class="el-icon-edit"></i></el-button>
          <el-button type="text"  @click="examine(scope.row)">审批<i class="el-icon-edit-outline"></i></el-button>
          <el-button type="text"  @click="outremake(scope.row)">外出备注<i class="el-icon-document-remove"></i></el-button>
          <el-button type="text"  @click="comeback(scope.row)">外出返回<i class="el-icon-time"></i></el-button>

        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :background="background"
      :current-page="queryForm.currPageNo"
      :total="total"
      :page-size="queryForm.limit"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    ></el-pagination>
    <div ref="print" class="mytables" id="printContent">

      <h3 style="text-align: center;">来访探视登记表</h3>
      <table style="width: 100%" class="mytable" cellpadding="0" cellspacing="1">
        <thead>
         <tr>
             
              <td rowspan="2" class="title">日期</td>
              <td colspan="2" style="width: 20%">老人信息</td>
              <td rowspan="2" style="width: 11%">家属姓名</td>
              <td rowspan="2" class="ttitle">联系方式</td>
          <td rowspan="2" class="ttitle">外出时间</td>
           <td rowspan="2"style="width: 11%">外出原因</td>
           <td rowspan="2" style="width: 11%">外出地点</td>
           <td rowspan="2" class="ttitle">返回时间</td>
           <td rowspan="2" class="ttitle">审批人</td>
            </tr>
         <tr>
              <td>姓名</td>
              <td>房间</td>
            </tr>
        </thead>
        <tbody>
          <tr v-for="item in list">
            <td style="font-size: 14px">{{new Date()| parseTime('{y}-{m}-{d}')}}</td>
            <td style="width:5%;font-size: 14px">{{item.elderlyName}}</td>
            <td style="font-size: 14px" v-if="item.checkInBed">{{item.checkInBed.buildingNumber}}楼{{item.checkInBed.unit}}单元{{item.checkInBed.floor}}层{{item.checkInBed.roomNumber}}房{{item.checkInBed.bedNumber}}床</td>
            <td style="width:5%;font-size: 14px">{{item.familyMemberName}}</td>
            <td style="font-size: 14px">{{item.familyMemberPhone}}</td>
            <td style="font-size: 14px" v-if="item.outingTime">{{item.outingTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</td>
           <td style="width:5%;font-size: 14px">{{item.outReason}}</td>
            <td style="font-size: 14px">{{item.destination}}</td>
           <td style="font-size: 14px" ><span v-if="item.comeBackTime">{{item.comeBackTime | parseTime('{y}-{m}-{d} {h}:{i}:{s}')}}</span></td>
              <td style="font-size: 14px">{{item.confirmor}}</td>

          </tr>

        </tbody>
      </table>
    </div>
    <el-dialog
      title="审批"
      :visible.sync="dialogFormVisibles"
      width="450px"
      @close="close"
      destroy-on-close
    >
      <el-form ref="form" :model="confirmToGoOut" label-width="80px" :rules="rules" style="margin: 0 auto">
        <el-form-item label="确认结果"  required >
      <el-select v-model="confirmToGoOut.confirmResCode" placeholder="请选择" >
        <el-option
          v-for="item in confirmResCode"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
        </el-form-item>
          <el-form-item label="审批人"  required >
          <el-select v-model="confirmToGoOut.confirmor" placeholder="请选择">
            <el-option
              v-for="item in confirmors"
              :key="item.uname"
              :label="item.userName"
              :value="item.uname">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisibles=false" >取 消</el-button>
        <el-button type="primary" @click="saveconfirmToGoOut">确 定</el-button>

      </div>
    </el-dialog>
    <el-dialog
      :title="comebackname"
      :visible.sync="dialogcomeback"
      width="450px"
      @close="close"
      destroy-on-close
    >

      <el-form ref="form" :model="comebacksure" label-width="80px" :rules="rules" style="margin: 0 auto"  v-if="!iscome">
        <el-form-item label="返回时间"  required >
          <el-date-picker

            v-model="comebacksure.comeBackTime"
            type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogcomeback=false" v-if="!iscome">取 消</el-button>
        <el-button type="primary" @click="savecomeback" v-if="!iscome">确 定</el-button>
      </div>


      <el-form ref="form" :model="goremake" label-width="80px" :rules="rules" style="margin: 0 auto"  v-if="iscome">
        <el-form-item label="外出备注"  required >
          <el-input type="textarea" v-model="goremake.remark"></el-input>

        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogcomeback=false" v-if="iscome">取 消</el-button>
        <el-button type="primary" @click="saveremake" v-if="iscome">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
    import {searchelderlycondition,add,search,searchuser,confirmToGoOut,comeback,addRemark,outregistration} from "@/api/egress";
    import { parseTime} from "@/utils/index";
    import Template from "../nursing/template";
    import Print from '@/utils/print'
    import Vue from 'vue'
    Vue.use(Print)
    export default {
        name: "Egress",
        components: {Template},
        value1:[new Date(),new Date()],
        filters:{
            parseTime: parseTime
        },
        data(){
            return{
                pickerOptionsStart: {
                    disabledDate: time => {
                        if (this.form.scComeBackTime) {
                            return time.getTime() > new Date(this.form.scComeBackTime).getTime()
                        }
                    }
                },
                pickerOptionsEnd: {
                    disabledDate: time => {
                        if (this.form.outingTime) {
                            return time.getTime() < new Date(this.form.outingTime).getTime() - 86400000
                        }
                    }
                },


                id:0,
                isshow:false,
                options:[],
                tableData:[

                ],
                iscome:false,
                comebacksure:{

                },
                goremake:{
                    remark:""
                },
                comebackname:"返回时间",
                background:true,
                listLoading:false,
                list:[],
                dialogFormVisible:false,
                dialogFormVisibles:false,
                dialogcomeback:false,
                title:"外出申请单",
                form:{

                },
                value1:[new Date(),new Date()],
                confirmors:[

                ],
                confirmResCode:[
                    {
                        value: 1,
                        label: '同意'
                    }, {
                        value: 2,
                        label: '不同意'
                    },
                ],
                confirmToGoOut:{
                    confirmResCode:0,
                    confirmor:"",
                    outCode:""
                },
                total:0,
                queryForm:{
                    institutionNumber:"",
                    limit:8,
                    currPageNo:1,
                    elderlyCondition:'',
                    outingTimeStart:new Date(),
                    outingTimeEnd:new Date(),

                },
                outForm:{
                    timeStart:"",
                    timeEnd:"",
                    institutionNumber:"",
                },

                rules: {
                    outReason: [
                        {required: true, message: '外出原因', trigger: 'blur'},

                    ],
                    checkInMark: [
                        {required: true, message: '老人姓名', trigger: 'change'},

                    ],
                    outingTime: [
                        {required: true, message: '外出时间', trigger: 'change'},

                    ],
                    scComeBackTime: [
                        {required: true, message: '预定返回时间', trigger: 'change'},

                    ],
                    familyMemberName: [
                        {required: true, message: '家属姓名', trigger: 'blur'},

                    ],
                    familyMemberPhone: [
                        {required: true, message: '家属联系方式', trigger: 'blur'},

                    ],
                    destination: [
                        {required: true, message: '外出地点', trigger: 'blur'},

                    ],
                }
            }
        },
        created(){
            this.form.institutionNumber=localStorage.getItem("institutionNumber")
            this.queryForm.institutionNumber=localStorage.getItem("institutionNumber")
            this.outForm.institutionNumber=localStorage.getItem("institutionNumber")
            this.search()
        },
        methods:{
            changetime(value){
                console.log(value)
                if(this.value1){
                    this.queryForm.outingTimeStart=value[0]
                    this.queryForm.outingTimeEnd=value[1]
                }else {
                    this.queryForm.outingTimeStart=new Date()
                    this.queryForm.outingTimeEnd=new Date()
                }

            },
            stamp(size){
                if(this.list){
                    this.$print(this.$refs.print, { size })
                }else {
                    this.$baseMessage("当前时间无数据可打印",'warning');
                }
            },
            handleAdd(id,data){
                this.id=id
                if(id>0){
                     this.isshow=true
                     this.form={
                         ...data
                     }
                }else {
                    this.isshow=false
                    this.form={
                        outingTime:new Date(),
                        checkInMark:"",
                        outReason:"",
                        scComeBackTime:"",
                        institutionNumber:localStorage.getItem("institutionNumber")

                    }
                }

              this.dialogFormVisible=true
            },
            examine(row){
                this.confirmToGoOut.outCode=row.outCode
                this.confirmToGoOut.confirmResCode=1
                this.confirmToGoOut.confirmor=localStorage.getItem("username")
                this.dialogFormVisibles=true
                let origin=localStorage.getItem("institutionNumber")
                searchuser({origin}).then(res =>{
                    console.log(res.data)
                    this.confirmors=res.data

                })
            },
            remoteMethod(query) {
                this.options=[]
                console.log(query)
                if (query !== '') {
                    this.loading = true;
                    setTimeout(() => {
                        this.loading = false;
                        let elderlycondition=query
                        searchelderlycondition({elderlycondition}).then(res =>{

                            if(res.data){
                                for(let i=0;i<res.data.length;i++){
                                    if(res.data[i].retreat==false){
                                        console.log(res.data[i])
                                        this.options.push(res.data[i])
                                    }
                                }
                            }






                        })
                    }, 200);
                } else {
                    this.options = [];
                }
            },
            change(value){
               console.log(value)
                this.form.checkInMark=value
            },

            saveegress(){

                this.$refs['form'].validate((valid) => {
                    if (valid) {

                        if(this.id>0){

                            add(this.form,'put').then(res =>{
                                this.$baseMessage("修改成功");
                                this.dialogFormVisible=false
                                this.search()

                            })
                        }else {

                            add(this.form,'post').then(res =>{
                                this.$baseMessage("登记成功");
                                this.dialogFormVisible=false
                                this.search()

                            })
                        }

                    } else {

                        return false;
                    }
                });

            },
            saveconfirmToGoOut(){
                confirmToGoOut(this.confirmToGoOut).then(res =>{
                    this.$baseMessage("审批成功");
                    this.dialogFormVisibles=false

                    this.queryForm.currPageNo=1
                    this.search();


                })
              console.log(this.confirmToGoOut)
            },
            search(id){
                this.listLoading=true
                if(id==1){
                    this.queryForm.currPageNo=1
                }else {

                }
                search(this.queryForm).then(res =>{
                    this.tableData=res.data.data
                    this.total=res.data.total
                    setTimeout(() => {
                        this.listLoading = false;
                    }, 50);


                })
                this.outForm.timeStart=this.queryForm.outingTimeStart
                this.outForm.timeEnd=this.queryForm.outingTimeEnd
                outregistration(this.outForm).then(res =>{
                    this.list=res.data



                })
            },

            comeback(row){
                this.iscome=false
                  this.comebackname='外出返回'
                 this.comebacksure.comeBackTime=new Date()
                 this.comebacksure.outCode=row.outCode
                 this.dialogcomeback=true

            },
            outremake(row){

                this.iscome=true
                this.goremake.outCode=row.outCode
                this.dialogcomeback=true
                this.comebackname='外出备注'
                this.goremake.remark=row.remark


            },
            saveremake(){
                addRemark(this.goremake).then(res =>{
                    this.$baseMessage("添加备注成功");
                    this.dialogcomeback=false

                    this.queryForm.currPageNo=1
                    this.search();
                })

            },
            handleSizeChange(val) {
                this.queryForm.limit = val;
                this.search();
            },
            handleCurrentChange(val) {
                this.queryForm.currPageNo = val;
                this.search();
            },
            savecomeback(){

                comeback(this.comebacksure).then(res =>{

                    this.$baseMessage("确认返回成功");
                    this.dialogcomeback=false

                    this.queryForm.currPageNo=1
                    this.search();



                })
            },
            close(){

                this.$refs['form'].resetFields();
            }
        }
    }
</script>
<style scoped>
  @media only screen and (min-width: 1920px){
    .table-egress>>> .el-col-xl-10 {
      width: 84.666667% !important;
    }
  }

    @media only screen and (min-width: 1920px){
      .table-egress>>> .el-col-xl-14 {
        width: 12.666667% !important;
      }
    }

  @media only screen and (min-width: 1200px){
    .table-egress>>> .el-col-xl-10 {
      width: 84.666667% !important;
    }
  }

  @media only screen and (min-width: 1200px){
    .table-egress>>> .el-col-xl-14 {
      width: 12.666667% !important;
    }
  }
  .mytables{
    display: none ;
    padding-top: 10px;

  }
  .mytable
  {

    border-collapse: collapse;
    margin: 0 auto;
    text-align: center;
  }
  .mytable td, table th
  {
    border: 1px solid rgba(59,65,81,.3);
    height: 40px;
  }
  .mytable .ttitle
  {
    background-color: #F5FAFA;
    width: 10%;
  }
  .mytable tr:nth-child(odd)
  {
    background: #fff;
  }
  .mytable .datalist{
    width: 30%;

  }

</style>
<style >

  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }

</style>


